<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo"/>
      <List :todos="todos" :deleteTodo="deleteTodo" :checkTodo="checkTodo"/>
      <Footer :todos="todos"/>
    </div>
  </div>
</template>

<script>
import Header from './components/Header/index.vue'
import List from './components/List/index.vue'
import Footer from './components/Footer/index.vue'
export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer
  },

  data () {
    return {
      todos: [
        {id: '001', title: '看科比打球', done: false},
        {id: '002', title: '听许巍的演唱会', done: true},
        {id: '003', title: '挣它100万', done: true},
      ]
    }
  },

  methods: {
    // 添加todo
    addTodo (title) {

      // 创建一个todo对象
      const todo = {
        id: Date.now()  + '',  // 后面讲
        title,
        done: false
      }

      // 向todos中添加一个todo对象
      this.todos.unshift(todo)
    },
    // 删除一个todo
    deleteTodo (index) {
      this.todos.splice(index, 1)
    },

    // 设置指定todo的勾选状态
    checkTodo (todo, isCheck) {
      todo.done = isCheck
    },
    // 切换todo勾选状态
    toggleTodo (todo) {
      todo.done = !todo.done
    }


  }
}
</script>

<style>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>
